<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript">
			window
		</script>
	</head>
	<body>
		<div style="width: 300px;height: 200px;background-color: red;"></div>
		<input type="button" value="取消" onclick="cancel()" />
		<script type="text/javascript">
			window.onload = function() {
				var myDiv = document.getElementsByTagName("div")[0];
				// event 事件；listener :监听
				myDiv.addEventListener("click", function() {
					myDiv.style.backgroundColor = "yellow";
					// this.style.backgroundColor = "yellow";
				});
				myDiv.addEventListener("click", function() {
					myDiv.style.height = "400px";
				});
				myDiv.addEventListener("mouseenter", mouseenter1);
				myDiv.addEventListener("mouseenter", mouseenter2);
				myDiv.addEventListener("mouseenter", mouseenter3);
				}
				function mouseenter1(){
					console.log("mouseenter1");
					
				}
				function mouseenter2(){
					console.log("mouseenter2");
					
				}
				function mouseenter3(){
					console.log("mouseenter3");
					
				}
				
				
			
				
			function cancel(){
				var myDiv = document.getElementsByTagName("div")[0];
				myDiv.removeEventListener("mouseenter", mouseenter1);
				myDiv.removeEventListener("mouseenter", mouseenter3);
			}
		</script>
	</body>
</html>
